<template>
  <div>
    <div class="css-1dbjc4n">
      <div
        class="css-1dbjc4n r-1awozwy r-1777fci"
        style="
          background-color: rgb(244, 244, 244);
          flex-direction: row;
          height: 0.42rem;
          margin-top: 0.1rem;
          margin-bottom: 0.1rem;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              text-align: center;
        
        "
      >
        <div
          class="css-1dbjc4n r-1mlwlqe r-1udh08x r-417010"
          style="height: 0.18rem; width: 0.18rem"
        >
          <div
            class="css-1dbjc4n r-1niwhzg r-vvn4in r-u6sd8q r-4gszlv r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-13qz1uu r-1wyyakw"
            style="
             
            "
          ></div>
          <img
            alt=""
            draggable="false"
            src=""
            class="css-9pa8cd"
          />
        </div>
        <div
          dir="auto"
          class="css-901oao"
          style="
            color: rgb(51, 51, 51);
            font-size: 0.15rem;
            font-weight: bold;
            padding-right: 0.08rem;
            padding-left: 0.08rem;
          "
        >
          精选好物
        </div>
        <div
          class="css-1dbjc4n r-1mlwlqe r-1udh08x r-417010"
          style="height: 0.18rem; width: 0.18rem"
        >
          <div
            class="css-1dbjc4n r-1niwhzg r-vvn4in r-u6sd8q r-4gszlv r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-13qz1uu r-1wyyakw"
            style="
              background-image: url('');
            "
          ></div>
          <img
            alt=""
            draggable="false"
            src="h"
            class="css-9pa8cd"
          />
        </div>
      </div>
    </div>
    <ul>
      <li v-for="v in arr" :key="v.id" @click="tiao(v.id)">
        <img
          :src="v.imgs"
        />
        <p>{{v.name}}</p>
        <i>{{v.texte}}</i><br>
        <b>￥{{v.money}}</b> <van-tag type="danger">分期免息</van-tag>
      </li>
    </ul>
  </div>
</template>

<script>
import getlink from "@/api/apiserver.js";
export default {
  data() {
    return {
        arr:[]
    };
  },
   mounted() {
    this.id = this.$route.query.id;
    

    getlink("/movdata/data").then((ok) => {
      // console.log(ok.data.xiangqing);
        this.num = this.id

      this.arr = ok.data.xiangqing
    // this.arr.forEach( => {
         
    //  });
    });
  },
  methods: {
      tiao(id){
           this.$router.push({path:'/Xq',query:{id:id}})
      }
  },
};
</script>

<style scoped>
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
li img {
  width: 1.25rem;
  height: 1.25rem;
  margin: auto;
  margin-top: 20px;
  /* margin: auto; */
}
li {
  width: 43%;
  /* text-align: center; */
  padding-left: 0.1rem;
  background-color: #ffff;
  line-height: 35px;
  
  margin: 10px 7px 10px 7px;
}
p {
  font-size: 0.14rem;
  font-weight: 600;
}
i{
    font-size: 0.10rem;
}
b{
font-size: 0.17rem;
color: rgb(250, 52, 52);
}
</style>
